<template>
  <div class="main">
    <!-- 头部标题 -->
    <div class="title">
      <h1 v-if="article">{{ article.title }}</h1>
      <h1 v-else>Loading...</h1>
      <div>
        <div class="hdoa">
          <Icon v-if="article" type="ios-time-outline" />
          <span v-if="article">{{ article.creationTime }}</span>

          <Icon v-if="article" type="md-flame" />
          <span v-if="article">{{ article.see }}</span>

          <Icon v-if="variable.commentData.value" type="md-chatboxes" />
          <span v-if="variable.commentData.value">{{ variable.commentData.value.spare }}</span>

          <span v-if="article">
            <Tooltip
              v-if="article.retransmission"
              content="转载请保留本文转载地址 著作权归作者所有"
              theme="light"
              max-width="180"
              placement="right"
              >© 允许规范转载</Tooltip
            >
            <Tooltip
              v-else
              content="著作权归作者所有"
              theme="light"
              max-width="150"
              placement="right"
            >
              © 禁止转载</Tooltip
            >
          </span>
        </div>
      </div>
    </div>

    <!-- 文章/评论 -->
    <div class="essay_main">
      <div ref="essay_main_div" class="essay_main_div">
        <div class="essay" id="essayId">
          <!-- 文章 default mk-cute smart-blue cyanosis -->
          <MdPreview
            editorId="MdPreview_id1"
            :modelValue="article.content"
            @onGetCatalog="onGetCatalog"
          />

          <!-- 上一篇/下一篇  -->
          <div class="wzdbkp">
            <div class="tx"><img src="/other/002.png" /></div>
            <h1>{{ variable.pz_all.value.blog_name }}</h1>
            <div class="tb">
              <Button type="info" @click="geArticle(false)">
                <Icon type="ios-arrow-back" size="16" /> 上一篇
              </Button>
              <div style="width: 400px">
                <svg
                  class="heart"
                  viewBox="-5 -5 278 56"
                  version="1.1"
                  id="svg5"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <filter>
                    <feGaussianBlur stdDeviation="1.6"></feGaussianBlur>
                  </filter>
                  <g transform="translate(29.1 -127.42)" id="layer1">
                    <path
                      pathLength="1"
                      d="M-28.73 167.2c26.43 9.21 68.46-9.46 85.45-12.03 18.45-2.78 32.82 4.86 28.75 9.83-3.82 4.66-25.77-21.18-14.81-31.5 9.54-8.98 17.64 10.64 16.42 17.06-1.51-6.2 2.95-26.6 14.74-22.11 11.7 4.46-4.33 49.03-15.44 44.08-6.97-3.1 15.44-16.26 26.1-16 23.03.56 55.6 27.51 126.63 3.36"
                      id="line"
                    ></path>
                  </g>
                  <g transform="translate(29.1 -127.42)" id="layer2">
                    <path
                      pathLength="1"
                      d="M-28.73 167.2c26.43 9.21 68.46-9.46 85.45-12.03 18.45-2.78 32.82 4.86 28.75 9.83-3.82 4.66-25.77-21.18-14.81-31.5 9.54-8.98 17.64 10.64 16.42 17.06-1.51-6.2 2.95-26.6 14.74-22.11 11.7 4.46-4.33 49.03-15.44 44.08-6.97-3.1 15.44-16.26 26.1-16 23.03.56 55.6 27.51 126.63 3.36"
                      id="point"
                      filter="url(#blur)"
                    ></path>
                  </g>
                </svg>
              </div>
              <Button type="success" @click="geArticle(true)">
                下一篇
                <Icon type="ios-arrow-forward" size="16" />
              </Button>
            </div>
          </div>

          <!-- 评论 -->
          <div id="pl">
            <CommentAll>评论</CommentAll>
          </div>
        </div>

        <!-- 右侧栏 -->
        <Affix :offset-top="80">
          <div class="rightDiv">
            <el-tabs
              style="padding: 10px; background-color: #fff; border-radius: 10px; overflow: hidden"
            >
              <el-tab-pane label="📄 文章目录" v-if="wzml">
                <MdCatalog editorId="MdPreview_id1" :scrollElement="scrollElement" />
              </el-tab-pane>

              <el-tab-pane label="⭐ 功能">
                <ArticlesTool />
              </el-tab-pane>
            </el-tabs>
          </div>
        </Affix>
      </div>
    </div>
  </div>
  <!-- 阅读模式抽屉 -->
  <Drawer
    v-model="variable.ydmsModel.value"
    width="100"
    height="100"
    placement="top"
    :styles="{ 'background-color': '#f3f1ec' }"
  >
    <template #close>
      <Button
        shape="circle"
        icon="md-close"
        size="large"
        style="
          font-size: 32px;
          width: 50px;
          height: 50px;
          background-color: rgba(97, 97, 97, 0.5);
          color: #fff;
          margin-right: 50px;
        "
        @click="variable.ydmsModel.value = !variable.ydmsModel.value"
      ></Button>
    </template>
    <div
      style="
        background-color: #f3f1ec;
        background-image:
          linear-gradient(90deg, rgba(60, 10, 30, 0.05) 3%, transparent 0),
          linear-gradient(1turn, rgba(60, 10, 30, 0.05) 3%, transparent 0);
        background-size: 20px 20px;
        background-position: 50%;
        background-attachment: fixed;
        padding: 50px 0;
      "
    >
      <MdPreview id="wzCtid" :modelValue="article.content" />
    </div>
  </Drawer>

  <!-- 分享对话框 -->
  <div id="participationModal" v-if="variable.participationModal.value">
    <div style="margin-top: 10%; width: 400px; border-radius: 5px; overflow: hidden">
      <div style="position: relative; height: 200px">
        <div style="position: absolute; width: 100%">
          <Image :src="article.img" width="100%" height="200px" style="filter: brightness(93%)" />
        </div>
        <div style="color: #fff; position: absolute; bottom: 30px; left: 30px">
          <h1 style="font-size: 60px; border-bottom: 3px solid #fff">29</h1>
          <h2 style="font-size: 20px">2024/08</h2>
        </div>
      </div>

      <div
        style="
          background-color: #fff;
          padding: 20px;
          color: #000;
          border-bottom: 5px dotted #e0e0e0;
        "
      >
        <p style="font-size: 20px; text-align: center">{{ article.title }}</p>
      </div>

      <div
        style="
          height: 130px;
          background-color: #fff;
          display: flex;
          justify-content: space-around;
          align-items: center;
        "
      >
        <Image src="/other/zw.png" width="90px" height="90px" />

        <div style="font-size: 20px; width: 140px; color: #9e9e9e"> 长按识别/手机扫码查看详情 </div>

        <img :src="variable.fxUrl.value" width="80px" height="80px" />
      </div>

      <div style="margin-top: 30px; display: flex; justify-content: center">
        <div id="participationModal_close" @click="variable.participationModal.value = false">
          <Icon type="md-close" size="20" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { MdPreview, MdCatalog } from 'md-editor-v3';
  import { Notice } from 'view-ui-plus';
  import variable from '../../js/variable';

  import CommentAll from '../../components/frontdesk/comment/CommentAll.vue';
  import ArticlesTool from './components/ArticlesTool.vue';

  const scrollElement = document.documentElement;

  const axios = inject('axios');
  const router = useRouter();
  const route = useRoute();

  const article = ref('');

  const essay_main_div = ref();

  onMounted(() => {
    findArticle();
  });
  onBeforeUnmount(() => {});

  // 查询文章详情
  const findArticle = () => {
    axios
      .post('article/findArticle', {
        id: route.params.id,
        pwd: variable.chouTiArticle.value.pwd,
      })
      .then((response) => {
        let res = response.data;

        if (res.msg == '成功' && res.data.total > 0) {
          article.value = res.data.records[0];

          //修改页面标题
          document.title = res.data.records[0].title + ' - ' + variable.pz_all.value.blog_name;

          //打开密码抽屉
          if (res.data.records[0].content == '私密文章，需要密码访问') {
            router.push('/');
            variable.wzDrawerStzte.value = true;
            variable.chouTiArticle.value.id = route.params.id;
          }

          //文章查看+1
          updSee();
        } else {
          router.push({ path: '/404' });
        }
      })
      .catch();
  };

  let wzml = ref(false); //文章目录是否显示
  //获取文章目录
  const onGetCatalog = (list) => {
    if (list.length > 0) {
      wzml.value = true;
    } else {
      wzml.value = false;
    }
  };

  //文章查看+1
  const updSee = async () => {
    try {
      await axios.post('article/updArticleSee', {
        id: route.params.id,
      });
    } catch (error) {
      console.error(error);
    }
  };

  //查询上一篇或下一篇文章
  const geArticle = (next) => {
    axios
      .post('article/findArticleByNext', { id: route.params.id, next: next })
      .then((response) => {
        let res = response.data;
        if (res.msg == '成功') {
          if (res.data) {
            router.push({ name: 'Article', params: { id: res.data } });
            setTimeout(() => {
              location.reload();
            }, 100);
          } else {
            Notice.warning({
              title: '没有啦~',
            });
          }
        }
      });
  };
</script>

<style scoped>
  .main {
    min-height: calc(100vh - 135px);
  }
  #wzCtid {
    width: 70%;
    margin: 0 auto;
    background-color: #f8f1e2;
    box-shadow: 0 6px 12px 3px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
  }
  ::v-deep .ivu-drawer-body {
    padding: 0;
  }
  :deep(.ivu-drawer-no-header .ivu-drawer-body) {
    padding: 0;
  }
  .title {
    padding-top: 70px;
    height: 450px;
    padding-left: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
  }

  .title > h1 {
    color: #f5f5f5;
    font-size: 50px;
  }

  .hdoa {
    color: #d6d6d6;
    user-select: none;
    font-size: 15px;
  }

  .hdoa > span {
    padding: 0 20px 0 4px;
  }

  .essay_main {
    background-color: #f3f1ec;
    background-image:
      linear-gradient(90deg, rgba(60, 10, 30, 0.05) 3%, transparent 0),
      linear-gradient(1turn, rgba(60, 10, 30, 0.05) 3%, transparent 0);
    background-size: 20px 20px;
    background-position: 50%;
    background-attachment: fixed;

    display: flex;
    justify-content: center;
  }

  .essay_main_div {
    width: 70%;
    margin: 50px 0;
    max-width: 1400px;
    display: flex;
    justify-content: space-between;
  }
  .essay {
    width: calc(100% - 350px);
    box-shadow: 0 8px 16px -4px #2c2d300c;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 50px;
  }
  .rightDiv {
    width: 350px;
    padding-left: 20px;
  }

  .wzdbkp {
    border: 1px solid rgb(230, 230, 230);
    background-color: #f7f7f9;
    border-radius: 10px;
    box-shadow: 0 8px 16px -4px #2c2d300c;
    width: 100%;
    height: 180px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    user-select: none;
    margin-top: 50px;
  }

  .tx {
    border: 1px solid rgb(230, 230, 230);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: absolute;
    top: -40px;
    overflow: hidden;
  }

  .tx img {
    width: 70px;
    border-radius: 50%;
    height: 70px;
    transition: 0.3s;
  }

  .tx:hover img {
    transform: scale(0.8);
  }

  .tx:before {
    animation: searchLights-1e3e0c73 2s ease-in 2s infinite;
    background-image: linear-gradient(180deg, transparent, hsla(0, 0%, 100%, 0.5), transparent);
    content: '';
    height: 20px;
    position: absolute;
    transform: rotate(-45deg);
    width: 1000px;
  }

  @keyframes searchLights-1e3e0c73 {
    0% {
      left: -200px;
      top: -300px;
    }

    to {
      left: -160px;
      top: 800px;
    }
  }

  .wzdbkp h1 {
    padding: 30px 0 0;
    letter-spacing: 1px;
  }

  .tb {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tb div {
    padding: 5px 10px;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
  }

  /* ----------------------------分享对话框-------------------------------- */
  #participationModal {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0px 1px 13px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
  }

  #participationModal_close {
    cursor: pointer;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #participationModal_close:hover {
    background-color: #ececec;
  }

  /* ----------------------------分享对话框end-------------------------------- */

  /* ------------打赏爱心--------------- */
  .heart #line {
    fill: none;
    stroke: #e00000;
    stroke-width: 1.5;
    stroke-linecap: butt;
    stroke-linejoin: round;
    stroke-miterlimit: 4;
    stroke-opacity: 1;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: aixin 3s linear infinite;
  }
  .heart #point {
    fill: none;
    stroke: #f00000;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 0.1;
    stroke-opacity: 1;
    stroke-dasharray: 0.0001, 0.9999;
    stroke-dashoffset: 1;
    animation: aixin 3s linear infinite;
  }
  @keyframes aixin {
    0% {
      stroke-dashoffset: 1;
    }
    80% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
  /* ------------打赏爱心end--------------- */

  @media (max-width: 1800px) {
    .essay_main_div {
      justify-content: center;
    }
    .rightDiv {
      display: none !important;
    }

    .essay {
      width: 100%;
    }

    .title > h1 {
      font-size: 30px;
    }
  }

  @media (max-width: 800px) {
    .barrage {
      opacity: 0;
    }

    .title > h1 {
      font-size: 20px;
    }

    .essay {
      width: 100%;
      margin: 0 auto;
      padding: 0;
    }

    .essay_main > div {
      width: 100%;
    }
  }
</style>
